// =============================================================================
// Copyright 2012 NCR Corporation
// =============================================================================
// All revision information is updated automatically from source code control
// change records - please do not manually edit.
// =============================================================================
//
// =============================================================================
//  $LastChangedRevision::                                          $
//  $LastChangedBy::                                                $
//  $LastChangedDate::                                              $
// =============================================================================

//
// Defines LESS mixins that can be imported into other less files and used
// to simplify common style configurations such as gradients, IE<9 fixes,
// etc.
//
.mixins {

    //------------------------------
    // Core styles
    //------------------------------

    // Styles element as inline-block, including fix for IE7.
    .inline-block {
        display: inline-block;
        //IE-7 Hack to make inline-block work.
        *zoom: 1;
        *display:inline;
    }

    // Add to parent div to clear floats
    .clear {
        *zoom: 1;
        &:before,
        &:after {
            display: table;
            content: "";
        }
        &:after {
            clear: both;
        }
    }

    // Element with height and width of 0.
    .no-size {
        width: 0;
        height: 0;
    }

    // Sets user-select properties and browser-prefixed variations.
    .user-select(@s) {
        -webkit-user-select: @s;
        -moz-user-select: @s;
        -o-user-select: @s;
        user-select: @s;
    }

    // Creates a vertical divider with the specified dimensions and colors.
    .vdivider(@width, @height, @margin, @color, @shadow-color) {
        background-color: @color;
        .box-shadow(1px, 0, 2px, @shadow-color);
        width: @width;
        height: @height - @margin * 2;
        margin: @margin 0;
    }

    // Creates a horizonatl divider with the specified dimensions and colors.
    .hdivider(@width, @height, @margin, @color, @shadow-color) {
        background-color: @color;
        .box-shadow(0, 1px, 2px, @shadow-color);
        width: @width - @margin * 2;
        height: @height;
        margin: 0 @margin;
    }

    //------------------------------
    // CSS3 styles
    //------------------------------

    // Apply border radius to element.
    .border-radius(@top-left: @border-radius, @top-right: @border-radius, @bottom-left: @border-radius, @bottom-right: @border-radius) {
        border-radius: @top-left @top-right @bottom-left @bottom-right;
        -webkit-border-radius: @top-left @top-right @bottom-left @bottom-right;
        -moz-border-radius: @top-left @top-right @bottom-left @bottom-right;
    }

    // Apply transition to element.
    .transition(@duration: 0.25s, @property: all, @func: ease-in-out) {
        transition: @duration @property @func;
        -webkit-transition: @duration @property @func;
        -moz-transition: @duration @property @func;
        -o-transition: @duration @property @func;
        -ms-transition: @duration @property @func;
    }

    // Apply box shadow to element.
    .box-shadow(@x: 0, @y: 1px, @z: 1px, @color: rgba(0, 0, 0, 0.5)) {
        box-shadow: @x @y @z @color;
        -webkit-box-shadow: @x @y @z @color;
        -moz-box-shadow: @x @y @z @color;
        -o-box-shadow: @x @y @z @color;
    }

    // Apply linear gradient to element.
    .linear-gradient(@angle, @c1, @stop1, @c2, @stop2) {
        background-repeat: repeat-x;
        background-image: linear-gradient(@angle, @c1 @stop1, @c2 @stop2);
        background-image: -o-linear-gradient(@angle, @c1 @stop1, @c2 @stop2);
        background-image: -moz-linear-gradient(@angle, @c1 @stop1, @c2 @stop2);
        background-image: -webkit-linear-gradient(@angle, @c1 @stop1, @c2 @stop2);
        background-image: -ms-linear-gradient(@angle, @c1 @stop1, @c2 @stop2);
    }

    // Apply vertical linear gradient from top to bottom.
    .vertical-gradient(@c1, @stop1, @c2, @stop2) {
        .linear-gradient(top, @c1, @stop1, @c2, @stop2);

        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr=@{c1}, endColorStr=@{c2}, GradientType=0)";
    }

    // Apply horizontal linear gradient from left to right.
    .horizontal-gradient(@c1, @stop1, @c2, @stop2) {
        .linear-gradient(left, @c1, @stop1, @c2, @stop2);

        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr=@{c1}, endColorStr=@{c2}, GradientType=1)";
    }

    //------------------------------
    // Shapes
    //------------------------------

    // Create a triangle pointing to the left.
    .triangle-left(@right, @top, @bottom, @color) {
        .no-size;

        border-top: @top solid transparent;
        border-bottom: @bottom solid transparent;
        border-right: @right solid @color;
    }

    // Create a triangle pointing to the right.
    .triangle-right(@left, @top, @bottom, @color) {
        .no-size;

        border-top: @top solid transparent;
        border-bottom: @bottom solid transparent;
        border-left: @left solid @color;
    }

    // Create a triangle pointing up.
    .triangle-up(@bottom, @left, @right, @color) {
        .no-size;

        border-left: @left solid transparent;
        border-right: @right solid transparent;
        border-bottom: @bottom solid @color;
    }

    // Create a triangle pointing down.
    .triangle-down(@top, @left, @right, @color) {
        .no-size;

        border-left: @left solid transparent;
        border-right: @right solid transparent;
        border-top: @top solid @color;
    }

    //------------------------------
    // Sprites
    //------------------------------

    // Creates an icon sprite with normal and disabled positions.
    .icon(@x, @y, @x-disabled, @y-disabled) {
        background-position: @x @y;

        &[disabled]{
            background-position: @x-disabled @y-disabled;
        }
    }

    // Creates a vertical button sprite with positions for hover, active and
    // disabled.  Sprite order should be (from top to bottom): normal, hover,
    // active, disabled.
    .button-sprite(vertical, @x, @y, @width, @height) {
        &:hover {
            background-position: @x @y - @height;
        }

        &:active {
            background-position: @x @y - @height * 2;
        }

        &[disabled], &[disabled]:hover, &[disabled]:active {
            background-position: @x @y - @height * 3;
        }
    }

    // Creates a horizontal button sprite with positions for hover, active and
    // disabled.  Sprite order should be (from left to right): normal, hover,
    // active, disabled.
    .button-sprite(horizontal, @x, @y, @width, @height) {
        &:hover {
            background-position: @x - @width @y;
        }

        &:active {
            background-position: @x - @width * 2 @y;
        }

        &[disabled], &[disabled]:hover, &[disabled]:active {
            background-position: @x - @width * 3 @y;
        }
    }

    // Creates a button sprite with positions for hover, active and
    // disabled.  Sprite order should be normal, hover,
    // active, disabled.  The first parameter should be either vertical or
    // horizontal to identify the direction of the sprite elements.
    .button-sprite(@_, @x, @y, @width, @height) {
        background-position: @x @y;
        width: @width;
        height: @height;
    }
}




